<template>
  <div class="table-wrapper">
    <el-table :data="list" style="width: 100%" :height="height">
      <el-table-column prop="name" label="用户" width="200">
        <template slot-scope="scope">
          <el-avatar :size="50" :src="scope.row.avatar" shape="square" />
          <span>{{ scope.row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="绑定手机号" width="150" />
      <el-table-column prop="invite_code" label="邀请码" width="150" />
      <el-table-column prop="referrer" label="上级" width="150" />

      <el-table-column prop="nextLevelNum" label="下级人数" width>
        <template slot-scope="scope">
          <span @click="handleClick(scope, title[0])">{{ scope.row.nextLevelNum }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="recommendProfit" label="推荐奖励" width="150" sortable>
        <template slot-scope="scope">
          <span @click="handleClick(scope, title[1])">{{ scope.row.recommendProfit }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="buyProfit" label="购物收益" width="150" sortable>
        <template slot-scope="scope">
          <span @click="handleClick(scope, title[2])">{{ scope.row.buyProfit }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="totalProfit" label="总收益" width sortable />
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      title: ['下级', '推荐奖励', '购物收益'],
      height: 0
    }
  },
  created() {
    this.setHeight()
  },
  methods: {
    handleClick(scope, name) {
      this.$emit('rankItemClick', scope, name)
    },
    setHeight() {
      this.height = document.body.clientHeight - 270
      window.onresize = () => {
        this.height = document.body.clientHeight - 270
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
.table-wrapper{
  margin-top: 20px;
}
.el-table /deep/ .cell {
  .edit {
    color: #409eff;
    margin-right: 24px;
    cursor: pointer;
    white-space: nowrap;
  }
  .delete {
    color: #f56c6c;
    cursor: pointer;
    white-space: nowrap;
    width: 60px;
  }
}
.el-table /deep/ .cell {
  &:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-avatar {
    margin-right: 15px;
    border: 1px solid #eee;
  }
}
.el-table /deep/ .el-table__row td {
    &:nth-child(1) {
      .cell {
        justify-content: flex-start !important;
      }
    }
  }
.el-table /deep/ .el-table__row td {
  &:nth-child(5),
  &:nth-child(6),
  &:nth-child(7) {
    color: #409eff;
    cursor: pointer;
    span {
      padding: 0 20px;
    }
  }
}
</style>
